<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>农友圈 - 禾行通</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .post-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        .post-card:hover {
            transform: translateY(-3px);
        }
        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
        .post-image {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            border-radius: 10px;
            margin: 1rem 0;
            cursor: pointer;
        }
        .action-btn {
            border: none;
            background: none;
            color: #6c757d;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            transition: all 0.3s ease;
        }
        .action-btn:hover {
            background-color: #f8f9fa;
            color: #495057;
        }
        .action-btn.liked {
            color: #dc3545;
        }
        .publish-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .tag {
            background-color: #e9ecef;
            color: #495057;
            padding: 0.25rem 0.5rem;
            border-radius: 15px;
            font-size: 0.8rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            display: inline-block;
            cursor: pointer;
        }
        .tag:hover {
            background-color: #dee2e6;
        }
        .sidebar-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .trending-item {
            padding: 0.5rem 0;
            border-bottom: 1px solid #f8f9fa;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .trending-item:last-child {
            border-bottom: none;
        }
        .trending-item:hover {
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        .comment-section {
            max-height: 200px;
            overflow-y: auto;
        }
        .image-preview {
            position: relative;
            display: inline-block;
            margin: 5px;
        }
        .image-preview img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 10px;
        }
        .image-preview .remove-btn {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #dc3545;
            color: white;
            border: none;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            cursor: pointer;
        }
        .location-info {
            background-color: #e3f2fd;
            color: #1976d2;
            padding: 0.25rem 0.5rem;
            border-radius: 15px;
            font-size: 0.8rem;
            margin-top: 0.5rem;
            display: inline-block;
        }
        .modal-backdrop {
            background-color: rgba(0,0,0,0.8);
        }
        .image-modal img {
            max-width: 100%;
            max-height: 80vh;
            object-fit: contain;
        }
        .weather-info {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .online-users {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 10px;
        }
        .online-user {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid #28a745;
            position: relative;
        }
        .online-indicator {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 8px;
            height: 8px;
            background: #28a745;
            border-radius: 50%;
            border: 1px solid white;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark" style="background: linear-gradient(45deg, #28a745, #20c997);">
        <div class="container">
            <a class="navbar-brand" href="/dashboard">
                <i class="fas fa-seedling me-2"></i>禾行通
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/dashboard">首页</a>
                <a class="nav-link" href="/vehicles">设备管理</a>
                <a class="nav-link" href="/fields">田地管理</a>
                <a class="nav-link" href="/tasks">任务管理</a>
                <a class="nav-link active" href="/community/circle">农友圈</a>
                <a class="nav-link" href="/community/forum">交流区</a>
                <a class="nav-link" href="/user/profile">个人中心</a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <!-- 左侧内容区 -->
            <div class="col-md-8">
                <!-- 发布动态 -->
                <div class="publish-card">
                    <div class="d-flex align-items-center mb-3">
                        <img src="https://via.placeholder.com/50" alt="用户头像" class="user-avatar me-3">
                        <div class="flex-grow-1">
                            <textarea class="form-control" placeholder="分享你的农场生活..." rows="3" id="postContent"></textarea>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <button class="btn btn-outline-secondary btn-sm me-2" id="addImage">
                                <i class="fas fa-image me-1"></i>图片
                            </button>
                            <button class="btn btn-outline-secondary btn-sm me-2" id="addLocation">
                                <i class="fas fa-map-marker-alt me-1"></i>位置
                            </button>
                            <button class="btn btn-outline-secondary btn-sm me-2" id="addTag">
                                <i class="fas fa-hashtag me-1"></i>话题
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" id="addMention">
                                <i class="fas fa-at me-1"></i>@农友
                            </button>
                        </div>
                        <button class="btn btn-primary" id="publishPost">
                            <i class="fas fa-paper-plane me-1"></i>发布
                        </button>
                    </div>
                    
                    <input type="file" id="imageInput" accept="image/*" style="display: none;" multiple>
                    <div id="selectedImages" class="mt-2"></div>
                    <div id="selectedTags" class="mt-2"></div>
                    <div id="selectedLocation" class="mt-2"></div>
                </div>
                
                <!-- 筛选选项 -->
                <div class="mb-3">
                    <div class="btn-group" role="group">
                        <input type="radio" class="btn-check" name="postFilter" id="filterAll" checked>
                        <label class="btn btn-outline-primary" for="filterAll">全部</label>
                        
                        <input type="radio" class="btn-check" name="postFilter" id="filterFollowing">
                        <label class="btn btn-outline-primary" for="filterFollowing">关注</label>
                        
                        <input type="radio" class="btn-check" name="postFilter" id="filterNearby">
                        <label class="btn btn-outline-primary" for="filterNearby">附近</label>
                        
                        <input type="radio" class="btn-check" name="postFilter" id="filterHot">
                        <label class="btn btn-outline-primary" for="filterHot">热门</label>
                    </div>
                </div>
                
                <!-- 动态列表 -->
                <div id="postsList">
                    <!-- 示例动态1 -->
                    <div class="post-card" data-post-id="1">
                        <div class="d-flex align-items-center mb-3">
                            <img src="https://via.placeholder.com/50" alt="张农夫" class="user-avatar me-3">
                            <div class="flex-grow-1">
                                <h6 class="mb-0">张农夫 <i class="fas fa-check-circle text-primary" title="认证用户"></i></h6>
                                <small class="text-muted">2小时前 · 山东济南</small>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm" data-bs-toggle="dropdown">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#" onclick="followUser('张农夫')">关注</a></li>
                                    <li><a class="dropdown-item" href="#" onclick="reportPost(1)">举报</a></li>
                                    <li><a class="dropdown-item" href="#" onclick="blockUser('张农夫')">屏蔽</a></li>
                                </ul>
                            </div>
                        </div>
                        
                        <p>今天的玉米长势真不错！感谢禾行通的智能管理系统，让我的农场管理变得如此轻松。 #智慧农业 #玉米种植</p>
                        
                        <img src="https://via.placeholder.com/600x300" alt="玉米田" class="post-image" onclick="openImageModal(this.src)">
                        
                        <div class="location-info">
                            <i class="fas fa-map-marker-alt me-1"></i>山东省济南市章丘区
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                <button class="action-btn" data-action="like" data-post-id="1">
                                    <i class="far fa-heart me-1"></i><span class="like-count">32</span>
                                </button>
                                <button class="action-btn" data-action="comment" data-post-id="1">
                                    <i class="far fa-comment me-1"></i><span class="comment-count">8</span>
                                </button>
                                <button class="action-btn" data-action="share" data-post-id="1">
                                    <i class="far fa-share-square me-1"></i>分享
                                </button>
                                <button class="action-btn" data-action="collect" data-post-id="1">
                                    <i class="far fa-bookmark me-1"></i>收藏
                                </button>
                            </div>
                            <small class="text-muted">32人点赞</small>
                        </div>
                        
                        <!-- 评论区 -->
                        <div class="mt-3 pt-3 border-top comment-section" id="comments-1">
                            <div class="d-flex mb-2">
                                <img src="https://via.placeholder.com/30" alt="李农友" class="rounded-circle me-2" style="width: 30px; height: 30px;">
                                <div class="flex-grow-1">
                                    <small><strong>李农友:</strong> 确实不错，我也在用这个系统</small>
                                    <div class="mt-1">
                                        <small class="text-muted me-2">1小时前</small>
                                        <small class="text-primary me-2 cursor-pointer" onclick="replyComment(1, '李农友')">回复</small>
                                        <small class="text-muted cursor-pointer" onclick="likeComment(1)">点赞</small>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex">
                                <img src="https://via.placeholder.com/30" alt="当前用户" class="rounded-circle me-2" style="width: 30px; height: 30px;">
                                <div class="flex-grow-1">
                                    <input type="text" class="form-control form-control-sm" placeholder="写评论..." onkeypress="handleCommentSubmit(event, 1)">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 示例动态2 -->
                    <div class="post-card" data-post-id="2">
                        <div class="d-flex align-items-center mb-3">
                            <img src="https://via.placeholder.com/50" alt="王大叔" class="user-avatar me-3">
                            <div class="flex-grow-1">
                                <h6 class="mb-0">王大叔</h6>
                                <small class="text-muted">5小时前 · 河南郑州</small>
                            </div>
                        </div>
                        
                        <p>分享一个小技巧：使用无人机巡田可以及时发现病虫害，大家可以试试！</p>
                        
                        <div class="row">
                            <div class="col-6">
                                <img src="https://via.placeholder.com/300x200" alt="无人机" class="post-image" onclick="openImageModal(this.src)">
                            </div>
                            <div class="col-6">
                                <img src="https://via.placeholder.com/300x200" alt="田地" class="post-image" onclick="openImageModal(this.src)">
                            </div>
                        </div>
                        
                        <div class="mt-2">
                            <span class="tag" onclick="searchByTag('无人机巡田')">#无人机巡田</span>
                            <span class="tag" onclick="searchByTag('病虫害防治')">#病虫害防治</span>
                            <span class="tag" onclick="searchByTag('农业技术')">#农业技术</span>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                <button class="action-btn liked" data-action="like" data-post-id="2">
                                    <i class="fas fa-heart me-1"></i><span class="like-count">45</span>
                                </button>
                                <button class="action-btn" data-action="comment" data-post-id="2">
                                    <i class="far fa-comment me-1"></i><span class="comment-count">12</span>
                                </button>
                                <button class="action-btn" data-action="share" data-post-id="2">
                                    <i class="far fa-share-square me-1"></i>分享
                                </button>
                                <button class="action-btn" data-action="collect" data-post-id="2">
                                    <i class="far fa-bookmark me-1"></i>收藏
                                </button>
                            </div>
                            <small class="text-muted">45人点赞</small>
                        </div>
                        
                        <!-- 评论区 -->
                        <div class="mt-3 pt-3 border-top comment-section" id="comments-2" style="display: none;">
                            <div class="d-flex">
                                <img src="https://via.placeholder.com/30" alt="当前用户" class="rounded-circle me-2" style="width: 30px; height: 30px;">
                                <div class="flex-grow-1">
                                    <input type="text" class="form-control form-control-sm" placeholder="写评论..." onkeypress="handleCommentSubmit(event, 2)">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 示例动态3 -->
                    <div class="post-card" data-post-id="3">
                        <div class="d-flex align-items-center mb-3">
                            <img src="https://via.placeholder.com/50" alt="小李" class="user-avatar me-3">
                            <div class="flex-grow-1">
                                <h6 class="mb-0">小李</h6>
                                <small class="text-muted">1天前 · 江苏南京</small>
                            </div>
                        </div>
                        
                        <p>今年的收成比去年增产了20%！感谢科技的力量，也感谢农友们的经验分享。</p>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                <button class="action-btn" data-action="like" data-post-id="3">
                                    <i class="far fa-heart me-1"></i><span class="like-count">28</span>
                                </button>
                                <button class="action-btn" data-action="comment" data-post-id="3">
                                    <i class="far fa-comment me-1"></i><span class="comment-count">6</span>
                                </button>
                                <button class="action-btn" data-action="share" data-post-id="3">
                                    <i class="far fa-share-square me-1"></i>分享
                                </button>
                                <button class="action-btn" data-action="collect" data-post-id="3">
                                    <i class="far fa-bookmark me-1"></i>收藏
                                </button>
                            </div>
                            <small class="text-muted">28人点赞</small>
                        </div>
                        
                        <!-- 评论区 -->
                        <div class="mt-3 pt-3 border-top comment-section" id="comments-3" style="display: none;">
                            <div class="d-flex">
                                <img src="https://via.placeholder.com/30" alt="当前用户" class="rounded-circle me-2" style="width: 30px; height: 30px;">
                                <div class="flex-grow-1">
                                    <input type="text" class="form-control form-control-sm" placeholder="写评论..." onkeypress="handleCommentSubmit(event, 3)">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 加载更多 -->
                <div class="text-center mt-4">
                    <button class="btn btn-outline-primary" id="loadMore">
                        <i class="fas fa-spinner me-1"></i>加载更多
                    </button>
                </div>
            </div>
            
            <!-- 右侧边栏 -->
            <div class="col-md-4">
                <!-- 天气信息 -->
                <div class="weather-info">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">今日天气</h6>
                            <small>适宜农事活动</small>
                        </div>
                        <div class="text-end">
                            <h4 class="mb-0">25°C</h4>
                            <small><i class="fas fa-sun me-1"></i>晴</small>
                        </div>
                    </div>
                </div>
                
                <!-- 在线农友 -->
                <div class="sidebar-card">
                    <h5><i class="fas fa-circle text-success me-2"></i>在线农友 (23)</h5>
                    <hr>
                    <div class="online-users">
                        <img src="https://via.placeholder.com/30" alt="农友1" class="online-user">
                        <div class="online-indicator"></div>
                        <img src="https://via.placeholder.com/30" alt="农友2" class="online-user">
                        <div class="online-indicator"></div>
                        <img src="https://via.placeholder.com/30" alt="农友3" class="online-user">
                        <div class="online-indicator"></div>
                        <img src="https://via.placeholder.com/30" alt="农友4" class="online-user">
                        <div class="online-indicator"></div>
                        <img src="https://via.placeholder.com/30" alt="农友5" class="online-user">
                        <div class="online-indicator"></div>
                    </div>
                    <small class="text-muted mt-2 d-block">点击头像开始聊天</small>
                </div>
                
                <!-- 热门话题 -->
                <div class="sidebar-card">
                    <h5><i class="fas fa-fire me-2"></i>热门话题</h5>
                    <hr>
                    <div class="trending-item" onclick="searchByTag('智慧农业')">
                        <div class="d-flex justify-content-between">
                            <span>#智慧农业</span>
                            <small class="text-muted">1.2k讨论</small>
                        </div>
                    </div>
                    <div class="trending-item" onclick="searchByTag('无人机巡田')">
                        <div class="d-flex justify-content-between">
                            <span>#无人机巡田</span>
                            <small class="text-muted">856讨论</small>
                        </div>
                    </div>
                    <div class="trending-item" onclick="searchByTag('病虫害防治')">
                        <div class="d-flex justify-content-between">
                            <span>#病虫害防治</span>
                            <small class="text-muted">634讨论</small>
                        </div>
                    </div>
                    <div class="trending-item" onclick="searchByTag('收获季节')">
                        <div class="d-flex justify-content-between">
                            <span>#收获季节</span>
                            <small class="text-muted">423讨论</small>
                        </div>
                    </div>
                    <div class="trending-item" onclick="searchByTag('有机种植')">
                        <div class="d-flex justify-content-between">
                            <span>#有机种植</span>
                            <small class="text-muted">312讨论</small>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐农友 -->
                <div class="sidebar-card">
                    <h5><i class="fas fa-users me-2"></i>推荐农友</h5>
                    <hr>
                    <div class="d-flex align-items-center mb-3">
                        <img src="https://via.placeholder.com/40" alt="农业专家" class="rounded-circle me-3" style="width: 40px; height: 40px;">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">农业专家老刘 <i class="fas fa-check-circle text-primary" title="认证专家"></i></h6>
                            <small class="text-muted">30年种植经验</small>
                        </div>
                        <button class="btn btn-outline-primary btn-sm" onclick="followUser('农业专家老刘')">关注</button>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <img src="https://via.placeholder.com/40" alt="科技农夫" class="rounded-circle me-3" style="width: 40px; height: 40px;">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">科技农夫</h6>
                            <small class="text-muted">智能设备达人</small>
                        </div>
                        <button class="btn btn-outline-primary btn-sm" onclick="followUser('科技农夫')">关注</button>
                    </div>
                    <div class="d-flex align-items-center">
                        <img src="https://via.placeholder.com/40" alt="绿色种植" class="rounded-circle me-3" style="width: 40px; height: 40px;">
                        <div class="flex-grow-1">
                            <h6 class="mb-0">绿色种植合作社</h6>
                            <small class="text-muted">有机农业推广</small>
                        </div>
                        <button class="btn btn-outline-primary btn-sm" onclick="followUser('绿色种植合作社')">关注</button>
                    </div>
                </div>
                
                <!-- 农事日历 -->
                <div class="sidebar-card">
                    <h5><i class="fas fa-calendar-alt me-2"></i>农事日历</h5>
                    <hr>
                    <div class="trending-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>今日</strong>
                                <br><small class="text-muted">适宜播种玉米</small>
                            </div>
                            <i class="fas fa-seedling text-success"></i>
                        </div>
                    </div>
                    <div class="trending-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>明日</strong>
                                <br><small class="text-muted">注意防治病虫害</small>
                            </div>
                            <i class="fas fa-bug text-warning"></i>
                        </div>
                    </div>
                    <div class="trending-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>本周</strong>
                                <br><small class="text-muted">水稻施肥期</small>
                            </div>
                            <i class="fas fa-tint text-info"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 快捷功能 -->
                <div class="sidebar-card">
                    <h5><i class="fas fa-tools me-2"></i>快捷功能</h5>
                    <hr>
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary btn-sm" onclick="window.location.href='/fields'">
                            <i class="fas fa-map me-1"></i>查看我的田地
                        </button>
                        <button class="btn btn-outline-success btn-sm" onclick="window.location.href='/tasks'">
                            <i class="fas fa-tasks me-1"></i>创建新任务
                        </button>
                        <button class="btn btn-outline-info btn-sm" onclick="window.location.href='/monitor/realtime'">
                            <i class="fas fa-eye me-1"></i>实时监控
                        </button>
                        <button class="btn btn-outline-warning btn-sm" onclick="window.location.href='/community/forum'">
                            <i class="fas fa-question-circle me-1"></i>提问求助
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片查看模态框 -->
    <div class="modal fade" id="imageModal" tabindex="-1">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content bg-transparent border-0">
                <div class="modal-body text-center p-0">
                    <img id="modalImage" src="" alt="图片" class="image-modal">
                    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal"></button>
                </div>
            </div>
        </div>
    </div>

    <!-- 分享模态框 -->
    <div class="modal fade" id="shareModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">分享动态</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary" onclick="shareToWeChat()">
                            <i class="fab fa-weixin me-2"></i>分享到微信
                        </button>
                        <button class="btn btn-outline-info" onclick="shareToQQ()">
                            <i class="fab fa-qq me-2"></i>分享到QQ
                        </button>
                        <button class="btn btn-outline-success" onclick="copyLink()">
                            <i class="fas fa-link me-2"></i>复制链接
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let currentLocation = null;
        let selectedImages = [];
        let selectedTags = [];
        
        // 点赞功能
        document.querySelectorAll('[data-action="like"]').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const countSpan = this.querySelector('.like-count');
                let count = parseInt(countSpan.textContent);
                const postId = this.dataset.postId;
                
                if (this.classList.contains('liked')) {
                    this.classList.remove('liked');
                    icon.className = 'far fa-heart me-1';
                    count--;
                    // 发送取消点赞请求
                    unlikePost(postId);
                } else {
                    this.classList.add('liked');
                    icon.className = 'fas fa-heart me-1';
                    count++;
                    // 发送点赞请求
                    likePost(postId);
                }
                
                countSpan.textContent = count;
                // 更新点赞数显示
                const parentCard = this.closest('.post-card');
                const likeText = parentCard.querySelector('.text-muted');
                likeText.textContent = count + '人点赞';
            });
        });
        
        // 评论功能
        document.querySelectorAll('[data-action="comment"]').forEach(btn => {
            btn.addEventListener('click', function() {
                const postId = this.dataset.postId;
                const commentSection = document.getElementById('comments-' + postId);
                
                if (commentSection.style.display === 'none' || !commentSection.style.display) {
                    commentSection.style.display = 'block';
                    // 加载评论
                    loadComments(postId);
                } else {
                    commentSection.style.display = 'none';
                }
            });
        });
        
        // 分享功能
        document.querySelectorAll('[data-action="share"]').forEach(btn => {
            btn.addEventListener('click', function() {
                const postId = this.dataset.postId;
                const shareModal = new bootstrap.Modal(document.getElementById('shareModal'));
                shareModal.show();
            });
        });
        
        // 收藏功能
        document.querySelectorAll('[data-action="collect"]').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                const postId = this.dataset.postId;
                
                if (this.classList.contains('collected')) {
                    this.classList.remove('collected');
                    icon.className = 'far fa-bookmark me-1';
                    uncollectPost(postId);
                    showToast('已取消收藏');
                } else {
                    this.classList.add('collected');
                    icon.className = 'fas fa-bookmark me-1';
                    collectPost(postId);
                    showToast('已收藏');
                }
            });
        });
        
        // 添加图片
        document.getElementById('addImage').addEventListener('click', function() {
            document.getElementById('imageInput').click();
        });
        
        document.getElementById('imageInput').addEventListener('change', function(e) {
            const files = e.target.files;
            const container = document.getElementById('selectedImages');
            
            for (let file of files) {
                if (selectedImages.length >= 9) {
                    showToast('最多只能选择9张图片');
                    break;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    const imagePreview = document.createElement('div');
                    imagePreview.className = 'image-preview';
                    imagePreview.innerHTML = `
                        <img src="${e.target.result}" alt="预览图">
                        <button class="remove-btn" onclick="removeImage(this)">&times;</button>
                    `;
                    container.appendChild(imagePreview);
                    selectedImages.push(file);
                };
                reader.readAsDataURL(file);
            }
        });
        
        // 添加位置
        document.getElementById('addLocation').addEventListener('click', function() {
            // 这里可以集成地图API获取位置
            const location = prompt('请输入位置信息:');
            if (location) {
                currentLocation = location;
                const container = document.getElementById('selectedLocation');
                container.innerHTML = `
                    <div class="location-info">
                        <i class="fas fa-map-marker-alt me-1"></i>${location}
                        <button class="btn btn-sm btn-outline-danger ms-2" onclick="removeLocation()">删除</button>
                    </div>
                `;
            }
        });
        
        // 添加话题标签
        document.getElementById('addTag').addEventListener('click', function() {
            const tag = prompt('请输入话题标签（不含#）:');
            if (tag && !selectedTags.includes(tag)) {
                selectedTags.push(tag);
                const container = document.getElementById('selectedTags');
                const tagElement = document.createElement('span');
                tagElement.className = 'tag';
                tagElement.innerHTML = `#${tag} <button class="btn btn-sm" onclick="removeTag('${tag}', this)">&times;</button>`;
                container.appendChild(tagElement);
            }
        });
        
        // @农友功能
        document.getElementById('addMention').addEventListener('click', function() {
            const mention = prompt('请输入要@的农友用户名:');
            if (mention) {
                const textarea = document.getElementById('postContent');
                const currentText = textarea.value;
                textarea.value = currentText + ' @' + mention + ' ';
                textarea.focus();
            }
        });
        
        // 发布动态
        document.getElementById('publishPost').addEventListener('click', function() {
            const content = document.getElementById('postContent').value.trim();
            
            if (!content && selectedImages.length === 0) {
                showToast('请输入内容或选择图片');
                return;
            }
            
            // 构建发布数据
            const postData = {
                content: content,
                images: selectedImages,
                tags: selectedTags,
                location: currentLocation
            };
            
            // 发送发布请求
            publishPost(postData);
        });
        
        // 筛选功能
        document.querySelectorAll('input[name="postFilter"]').forEach(radio => {
            radio.addEventListener('change', function() {
                const filter = this.id.replace('filter', '').toLowerCase();
                filterPosts(filter);
            });
        });
        
        // 加载更多
        document.getElementById('loadMore').addEventListener('click', function() {
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>加载中...';
            setTimeout(() => {
                loadMorePosts();
                this.innerHTML = '<i class="fas fa-spinner me-1"></i>加载更多';
            }, 1000);
        });
        
        // 工具函数
        function removeImage(btn) {
            const preview = btn.parentElement;
            const index = Array.from(preview.parentElement.children).indexOf(preview);
            selectedImages.splice(index, 1);
            preview.remove();
        }
        
        function removeLocation() {
            currentLocation = null;
            document.getElementById('selectedLocation').innerHTML = '';
        }
        
        function removeTag(tag, btn) {
            const index = selectedTags.indexOf(tag);
            if (index > -1) {
                selectedTags.splice(index, 1);
            }
            btn.parentElement.remove();
        }
        
        function openImageModal(src) {
            document.getElementById('modalImage').src = src;
            const modal = new bootstrap.Modal(document.getElementById('imageModal'));
            modal.show();
        }
        
        function searchByTag(tag) {
            // 实现标签搜索功能
            console.log('搜索标签:', tag);
            showToast('正在搜索 #' + tag);
        }
        
        function followUser(username) {
            // 实现关注用户功能
            console.log('关注用户:', username);
            showToast('已关注 ' + username);
        }
        
        function reportPost(postId) {
            if (confirm('确定要举报这条动态吗？')) {
                console.log('举报动态:', postId);
                showToast('举报已提交');
            }
        }
        
        function blockUser(username) {
            if (confirm('确定要屏蔽用户 ' + username + ' 吗？')) {
                console.log('屏蔽用户:', username);
                showToast('已屏蔽用户 ' + username);
            }
        }
        
        function handleCommentSubmit(event, postId) {
            if (event.key === 'Enter') {
                const input = event.target;
                const comment = input.value.trim();
                if (comment) {
                    submitComment(postId, comment);
                    input.value = '';
                }
            }
        }
        
        function replyComment(commentId, username) {
            const input = document.querySelector(`#comments-${commentId} input`);
            input.value = '@' + username + ' ';
            input.focus();
        }
        
        function likeComment(commentId) {
            console.log('点赞评论:', commentId);
            showToast('已点赞评论');
        }
        
        function shareToWeChat() {
            showToast('分享到微信功能开发中...');
        }
        
        function shareToQQ() {
            showToast('分享到QQ功能开发中...');
        }
        
        function copyLink() {
            navigator.clipboard.writeText(window.location.href).then(() => {
                showToast('链接已复制到剪贴板');
            });
        }
        
        function showToast(message) {
            // 创建简单的提示框
            const toast = document.createElement('div');
            toast.className = 'position-fixed top-0 start-50 translate-middle-x mt-3 alert alert-info alert-dismissible';
            toast.style.zIndex = '9999';
            toast.innerHTML = `
                ${message}
                <button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
            `;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                if (toast.parentElement) {
                    toast.remove();
                }
            }, 3000);
        }
        
        // API调用函数（需要根据后端接口实现）
        function likePost(postId) {
            // 发送点赞请求到后端
            console.log('点赞动态:', postId);
        }
        
        function unlikePost(postId) {
            // 发送取消点赞请求到后端
            console.log('取消点赞动态:', postId);
        }
        
        function collectPost(postId) {
            // 发送收藏请求到后端
            console.log('收藏动态:', postId);
        }
        
        function uncollectPost(postId) {
            // 发送取消收藏请求到后端
            console.log('取消收藏动态:', postId);
        }
        
        function publishPost(postData) {
            // 发送发布动态请求到后端
            console.log('发布动态:', postData);
            showToast('动态发布成功！');
            
            // 清空表单
            document.getElementById('postContent').value = '';
            document.getElementById('selectedImages').innerHTML = '';
            document.getElementById('selectedTags').innerHTML = '';
            document.getElementById('selectedLocation').innerHTML = '';
            selectedImages = [];
            selectedTags = [];
            currentLocation = null;
        }
        
        function loadComments(postId) {
            // 从后端加载评论数据
            console.log('加载评论:', postId);
        }
        
        function submitComment(postId, comment) {
            // 提交评论到后端
            console.log('提交评论:', postId, comment);
            showToast('评论发布成功！');
        }
        
        function filterPosts(filter) {
            // 根据筛选条件过滤动态
            console.log('筛选动态:', filter);
            showToast('正在加载' + filter + '动态...');
        }
        
        function loadMorePosts() {
            // 加载更多动态
            console.log('加载更多动态');
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化页面数据
            console.log('农友圈页面加载完成');
            
            // 模拟实时更新在线用户数
            setInterval(() => {
                const onlineCount = Math.floor(Math.random() * 10) + 20;
                document.querySelector('.sidebar-card h5').innerHTML = 
                    '<i class="fas fa-circle text-success me-2"></i>在线农友 (' + onlineCount + ')';
            }, 30000);
        });
    </script>
</body>
</html>